<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.d1{
				background: blanchedalmond;
				width: 140px;
				height: 140px;
				display: none;
			}
			.active{
				background: red;
			}		
		</style>
	</head>
	<body>
		<div id="div1">
		    <input type="button" value="点我一" class="active"/>
		    <input type="button" value="点我二" />
		    <input type="button" value="点我三" />
		    <div class="d1" style="display: block;">面向对象1111111</div>
		    <div class="d1">面向对象2222222</div>
		    <div class="d1">面向对象3333333</div>
		</div>		
		<script type="text/javascript">
			window.onload = function() {
				//实例化TabSwitch类
				var oTab = new TabSwitch('div1');
			}
			//TabSwitch类的构建
			function TabSwitch(id) {
				//获取父元素的id
				var oDiv = document.getElementById(id);
				//获取父元素下所有的btn
				this.aBtn = oDiv.getElementsByTagName('input');
				//获取父元素下所有的div
				this.aDiv = oDiv.getElementsByTagName('div');
				//存储TabSwitch对象的this
				var _this = this;
				//遍历父元素下所有的btn
				for(var i = 0; i < this.aBtn.length; i++) {
					//保存当前btn元素的下标
					this.aBtn[i].index = i;
					//btn的点击事件
					this.aBtn[i].onclick = function() {
						//调用TabSwitch对象的原型方法tab，传递当前btn的this
						_this.tab(this);
					}
				}
			}
			//TabSwitch的tab方法
			TabSwitch.prototype.tab = function(oBtn) {
				//初始化所有的btn和div
				for(var i = 0; i < this.aBtn.length; i++) {
					this.aBtn[i].className = '';
					this.aDiv[i].style.display = 'none';
				}
				//将当前btn的class设置为active
				oBtn.className = 'active';
				//给当前的div加block属性
				this.aDiv[oBtn.index].style.display = 'block';
			}
		</script>
	</body>
</html>